<template>
  <div>
    <el-select v-model="value" class="m-2" placeholder="请选择部门" size="large">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
        @click="btn(item.value)" />
    </el-select>
  </div>
  <el-table :data=tableMainData style="width: 100%" :row-class-name="tableRowClassName">
    <el-table-column prop="Time" label="时间" width="180" />
    <el-table-column prop="Part" label="部门" width="180" />
    <el-table-column prop="Sales" label="销售额（万元）" width="180" />
    <el-table-column prop="SalesOrder" label="销售单量" width="180" />
    <el-table-column prop="Target" label="目标" width="180" />
    <el-table-column prop="CompletionRate" label="完成率" />
  </el-table>
  <div class="demo-pagination-block">
    <div class="demonstration"></div>
    <el-pagination v-model:current-page="currentPage3" v-model:page-size="pageSize3" :small="small" :disabled="disabled"
      :background="background" layout="prev, pager, next, jumper" :total="1000" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  </div>
</template>
  
<script lang="ts" setup>
import { ref, computed } from 'vue'
interface IProps {
  datayyy: any
  ssss: any
}
const porps = defineProps<IProps>()
let tableData: any = ref()

const tableMainData = computed(() => {
  console.log("aaa");
  return tableData.value ? tableData.value : porps.datayyy
})

interface User {
  date: string
  name: string
  address: string
}


//变色
const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: User
  rowIndex: number
}) => {
  if (rowIndex === 1) {
    return 'warning-row'
  } else if (rowIndex === 3) {
    return 'success-row'
  }
  return ''
}

const value = ref('')

const options = [
  {
    value: '1',
    label: '市场一部',
  },
  {
    value: '2',
    label: '市场二部',
  }
]
const btn = (value: any) => {
  if (value == '1') {
    return tableData.value = porps.datayyy
  } else if (value == '2') {
    return tableData.value = porps.ssss

  } else {
    return tableData.value = porps.datayyy
  }
}
// const selPart=()=>{
//     if(value.value=='1'){
//         console.log(value.value);
//         return porps.datayyy
// }else if(value.value=='2'){
//     return porps.ssss
// }else{
//     console.log(value);
//     return porps.datayyy
// }
// }



// import { relative } from 'path';
//分页


const currentPage1 = ref(5)
const currentPage2 = ref(5)
const currentPage3 = ref(5)
const currentPage4 = ref(4)
const pageSize2 = ref(100)
const pageSize3 = ref(100)
const pageSize4 = ref(100)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
</script>
  
  
<style>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}

select {
  width: 200px;
  height: 60px;
  border: 1px solid #ccc;
}
</style>